<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
        <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

        <script>

            $(function (){

                $("#username").blur(function (){

                    $.ajax("${pageContext.request.contextPath}/ajax/validateUsername",
                            {
                                type:"POST",
                                data:{"username":$(this).val()},
                                dataType:"text",
                                success:function(message){
                                    $("#usernameMessage").text(message);
                                }
                            });


                });


                $("#show").click(function () {

                    $.getJSON("${pageContext.request.contextPath}/ajax/getUser",
                              function(user){
                                  $("#id").text(user.id);
                                  $("#name").text(user.name);
                                  $("#password").text(user.password);
                                  $("#phone").text(user.phone);
                                  $("#age").text(user.age);

                              })
                });


            });

        </script>

    </head>
    <body>
        用户名：<input type="text" id="username" name="username"/>
        <span id="usernameMessage"></span>



        <hr/>

        <a id="show" href="javascript:;">显示数据</a>

        <hr/>

        编号：<span id="id"></span><br/>
        姓名：<span id="name"></span><br/>
        密码：<span id="password"></span><br/>
        电话：<span id="phone"></span><br/>
        年龄：<span id="age"></span><br/>



    </body>
</html>
